<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">邮箱</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-verify="required|email" name="email" placeholder="请输入邮箱" type="email"
                       value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">新的密码</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-reqtext="新的密码不能为空" lay-verify="required" name="password"
                       placeholder="请输入新的密码" type="password" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">确认密码</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-reqtext="新的密码不能为空" lay-verify="required|confirmPass"
                       name="again_password"
                       placeholder="请输入新的密码" type="password" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择角色</label>
            <div class="layui-input-block">
                <div id="LAY-auth-user-role"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">姓名</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-reqtext="用户名不能为空" lay-verify="required" name="realname"
                       placeholder="请输入用户名"
                       type="text" value="">
                <tip>填写自己的姓名</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">手机</label>
            <div class="layui-input-block">
                <input class="layui-input" lay-reqtext="手机不能为空" lay-verify="required|phone" name="mobile"
                       placeholder="请输入手机"
                       type="number" value="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">性别</label>
            <div class="layui-input-block">
                <input checked="" name="gender" title="男" type="radio" value="男">
                <input name="gender" title="女" type="radio" value="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">职业</label>
            <div class="layui-input-block">
                <input class="layui-input" name="profession" placeholder="请输入职业" type="text" value="">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="remark" placeholder="请输入备注信息"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-filter="saveBtn" lay-submit>确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table', 'authtree'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            authtree = layui.authtree,
            $ = layui.$;
        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        form.verify({
            confirmPass: function (value) {
                if ($('input[name=password]').val() !== value)
                    return '两次密码输入不一致！';
            }
        });

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        var roleIds = [];
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            data.field.roleIds = roleIds;
            $.post("/admin/user/userAdd", data.field, function (res) {
                if (res.success) {
                    var index = layer.alert(res.msg, {
                        title: '最终的提交信息'
                    }, function () {
                        // 关闭弹出层
                        layer.close(index);
                        layer.close(parentIndex);
                        table.reload('currentTableId');
                    });
                } else {
                    layer.alert(res.msg);
                }
            });
            return false;
        });

        //初始化角色树
        $.post('/admin/role/roles', function (data) {
            var trees = authtree.listConvert(data.data, {
                primaryKey: 'id'
                , startPid: 0
                , parentKey: 'parentId'
                , nameKey: 'name'
                , valueKey: 'id'
            });
            // 如果后台返回的不是树结构，请使用 authtree.listConvert 转换
            authtree.render('#LAY-auth-user-role', trees, {
                inputname: 'roles',
                layfilter: 'lay-check-user-role',
                autowidth: true,
                theme: 'auth-skin-default',
                themePath: '/lib/layuimini/js/lay-module/authtree/tree_themes/'
            });
        });
        authtree.on('change(lay-check-user-role)', function (data) {
            roleIds = authtree.getLeaf('#LAY-auth-user-role');
        });

        // $.post('/admin/role/roles', function (data) {
        //     $.each(data.data, function (index, item) {
        //         $('#roleId').append(new Option(item.code, item.id));
        //     });
        //     form.render('select'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
        // });
    });
</script>